import Taro from "@tarojs/taro";
import {View, Text} from "@tarojs/components";
import "./create-collect.less";
import {AtButton, AtTextarea, AtInput, AtMessage} from "taro-ui";
import Api from "../../api/api";
import NavBar from "../../commponents/nav-bar/nav-bar";
import {getGlobal} from "../../api/globalData";

export default class CreateCollect extends Taro.Component {
  constructor() {
    super(...arguments);
    this.state = {
      isPrivate: false,
      title: "",
      desc: ""
    };
  }

  componentWillMount() {
  }

  changeTitle(title) {
    this.setState({
      title: title
    });
  }

  changeDesc(e) {
    this.setState({
      desc: e.target.value
    });
  }

  changePrivate() {
    this.setState({
      isPrivate: isPrivate
    });
  }

  showError(msg) {
    Taro.atMessage({
      message: msg,
      type: "error",
      duration: 1000
    });
  }

  async create() {
    if (!this.state.title) {
      this.showError("请输入标题");
      return;
    } else if (!this.state.desc) {
      this.showError("请输入描述");
      return;
    }
    let subject = {
      title: this.state.title,
      desc: this.state.desc,
      private: this.state.isPrivate
    };
    let res = await Api.createSubject(subject);
    if (res.data.success) {
      await Taro.navigateBack({
        delta: 1
      });
    }
  }

  render() {
    return (
      <View>
        <NavBar title="创建收藏夹"/>
        <View className="create-collect">
          <View className="feild feild-cell">
            <AtInput
              type="text"
              placeholder="请输入标题"
              value={this.state.title}
              onChange={this.changeTitle.bind(this)}
            />
          </View>
          <View className="feild feild-cell">
            <AtTextarea
              height={80}
              count={false}
              value={this.state.desc}
              onChange={this.changeDesc.bind(this)}
              placeholder="请输入收藏夹描述"
            />
          </View>
          <View className="private feild feild-cell">
            <Text>是否私密</Text>
            <View className="private-btn">
              <Switch
                checked={this.state.isPrivate}
                onChange={this.changePrivate.bind(this)}
                color="#1296db"
              />
            </View>
          </View>
          <View className="create-btn">
            <AtButton type="primary" onClick={this.create.bind(this)} full>
              创建
            </AtButton>
          </View>
          <AtMessage/>
        </View>
      </View>
    );
  }
}
